/**
 * @class ElggMap
 * 
 * Subscribes to afterinit on ElggMap at the end of this file
 * 
 * ElggMap.Event.subscribe('afterinit', ElggMap.ui.init);
 * 
 */
ElggMap.provide('', {
	/**
	 * common code for User interface
	 * @class ElggMap.ui
	 */
	ui : {
		/**
		 * Reference to the div element that
		 * becames a jQuery UI dialog
		 *  
		 */
		popupElement: (function() {
			var el = $( "<div id='elgg-maps-popup'></div>" );
			$('body').append( el );
			return el;
		})(),
		/**
		 * UI initializer. se cuelga de  'afterinit'
		 */
		init: function(customOptions)
		{
			ElggMap.ui._initLayout();
			
			ElggMap.buildBaseMap(customOptions);
			
			ElggMap.showSessionInfo();
			// 
			// chequeo si hay un mapa cargado
			// y muestro la tab de datos
			// @todo mejorar el chequeo
			if ( ElggMap.layers.length ) {
				$("#userTabs").tabs( "select", 1);
			} else {
				$("#userTabs").tabs( "disable", 1);				
				if ( ElggMap.isLoggedIn() ) {
					$("#userTabs").tabs( "select", 0);
				} else {
					$("#userTabs").tabs( "select", 2);
				}
			}
			if ( ! ElggMap.isLoggedIn() ) {
					$("#userTabs").tabs( "disable", 0);			
			}
			
			ElggMap.Event.subscribe( "map.edit.started", function() {
				$("#userTabs").tabs( "enable", 1);
				$("#userTabs").tabs( "select", 1);
			});
			// Si en algún momento se carga el dialog.map.getInfo
			// activo y selecciono la tab correspondiente
			ElggMap.Event.subscribe( "dialog.map.getInfo.show", function() {
				$("#userTabs").tabs( "enable", 1);
				$("#userTabs").tabs( "select", 1);
			});
			// Conecto el botón de nuevo mapa al código
			ElggMap._attachNewMapButtonHandler();
			
			ElggMap.Event.fire('ui.afterinit');
		},
		
		_initLayout: function() 
		{
			$//('#Main').css(borderStyle);
			//$('body').outerHeight( $(window).height() );
			//$('body').outerWidth( $(window).width() );
			$('#Sidebar').outerWidth(350);

			ElggMap.ui._resetLayout();
			$('#userTabs').tabs();
			$(window).resize(ElggMap.ui._resetLayout);
		},
		
		_resetLayout: function()
		{
			//console.log('window: ' + $(window).width());
			//console.log('document: ' + $(document).width());
			//$('body').outerHeight( $(window).height() );
			//$('body').outerWidth( $(window).width() );
			//dejo un spare de 5, por las dudas
			$('#Header').outerHeight(82);
			var usableHeight = ( $(window).height() - $('#Header').outerHeight() ) - 5;
			$('#Main').outerHeight( usableHeight );
			$('#Main').outerWidth( $(window).width() );
			//console.log('main inner width: ' + $('#Main').innerWidth() );
			//console.log('sidebar outerwidth ' + $('#Sidebar').outerWidth() );
			$('#Sidebar').outerHeight( $('#Main').innerHeight() );
			$('#mapbox').outerHeight( $('#Main').innerHeight() );
			$('#mapbox').outerWidth( $('#Main').innerWidth() - $('#Sidebar').outerWidth() );
			//if(elggMap.map) elggMap._triggerPan();
			//console.log('layout reset');
		},
		
		/**
		 * Shows and elgg Map dialog
		 * It can show the dialog loaded from the server
		 * on a popup specifiying options.display='popup' OR
		 * on an inline existing element with options.display='inline'.
		 * If 'inline', options.selector must be set
		 *
		 * Name			| Type		| Description
		 * ------------	| --------- | ------------------------------------------
		 * display		| String	| one of 'popup' or 'inline'
		 * selector		| Mixed		| jQuery selector for the dialog container
		 * @param options {Object} options for the call
		 * @param Function callback The callback function
		 */
		dialog: function(method, options, callback ) {

			options = options || {};
			options.method = method;
			
			if (options.display === undefined ) {
				options.display = "popup";
			}

			if (options.display === "popup" ) {
				// Setup ElggMap.popupElement to a jQuery UI dialog 
				$(ElggMap.ui.popupElement).dialog({
					modal:true,
					resizable:false,
					title: 'ArgMap'
				});
				options.selector = ElggMap.ui.popupElement;
			} else if ( options.display === "inline" &&  options.selector === undefined ) {
					ElggMap.log( "display was 'inline' but no selector passed as option" );
			}

			ElggMap.apiDialog( options, callback );

		}
	},
	/**
	 * @class ElggMap
	 */
	/**
	 * @param message {String}
	 */
	emMessage: function(message)
	{
		if ('emMap_unavailable' === message) {
			message = 'No puede acceder a este mapa';
		}

		if ($('#emMessageBox').length === 0) {
			$("body").append("<div id='emMessageBox'>"+message+"</div>");
		} else {
			$('#emMessageBox').html(message);
		}

		$('#emMessageBox').dialog({ title: false, modal: true });
	},
		
	/**
	 * @param mapData. JSON object as returned by
	 * api map.getInfo
	 */
	showMapMetadata: function( mapData )
	{	
		if (typeof mapData !== 'object' || mapData == null) {
			ElggMap.log('ShowMapMetadata expected an object with map data');
			return;
		}
		ElggMap.apiDialog({
			method: "dialog.map.getInfo",
			selector: "#mapMetadata",
			guid : mapData.guid
		}, function() {
			/*
			$("#emMapEditButton").click( mapData, function() {
				ElggMap.edit( mapData );
			});
			*/
			ElggMap._attachEditMapButtonHandler( mapData );
		});

	},
	
	/**
	 * 
	 */
	showDefaultDetails: function()
	{
		$("#mapMetadata").html('');
	},
	/**
	 *
	 */
	showPublicMaps: function()
	{
		
		ElggMap.apiDialog({
			method: "dialog.map.getPublic",
			selector: "#publicMaps"
		});		

	},	
	/**
	 * 
	 */
	showVisibleMaps: function()
	{
		
		ElggMap.apiDialog({
			method: "dialog.visibleMaps",
			selector: "#publicMaps"
		});		

	},
	

	/**
	 * 
	 */
	showLoginForm: function()
	{
		ElggMap.ui.dialog('login');

	},
	/**
	 * 
	 */
	showEditForm: function(map)
	{
		ElggMap.apiDialog({
			method: "dialog.map.edit",
			selector: "#mapMetadata",
			guid : map.guid
		}, function() {
			$('#emMapSaveForm').submit( jQuery.proxy( ElggMap.stopEdit, ElggMap ) );	
			$('#emMapStopEditButton').click( jQuery.proxy( ElggMap.stopEdit, ElggMap ) );	
			$('#emMapCancelEditButton').click( function() { window.location=window.location} );				
		});		
	},
	/**
	 * 
	 */
	hideEditForm: function()
	{
		$('#mapMetadata').html('');
	},

	_attachNewMapButtonHandler: function()
	{
		$('#emMapNewButton').button();
		$('#emMapNewButton').live('click', jQuery.proxy( ElggMap.newMap, ElggMap ) );	
	},
	
	_attachEditMapButtonHandler: function( mapData )
	{
		$('#emMapEditButton').button();
		$('#emMapEditButton').click( function() {
			ElggMap.edit( mapData ) ;
		});
	}

});

ElggMap.Event.subscribe('afterinit', ElggMap.ui.init);